<template>
    <div id="addUser">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/UserManager' }">用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户添加</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
        <el-form :model="addUserForm" :inline="true" :rules="rules" size="mini" ref="addUserForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户账号" prop="workName">
                <el-input v-model="addUserForm.workName"></el-input>
            </el-form-item>
           <el-form-item label="用户密码" prop="password">
                <el-input v-model="addUserForm.password"></el-input>
            </el-form-item>
            <el-form-item label="用户性别" prop="workSex">
                <el-select v-model="addUserForm.workSex" placeholder="请选择用户性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户身份证" prop="workIdCard">
                <el-input v-model="addUserForm.workIdCard"></el-input>
            </el-form-item>
            <el-form-item label="用户电话" prop="workTel">
                <el-input v-model="addUserForm.workTel"></el-input>
            </el-form-item>
<!--             <el-form-item label="出生日期" prop="birthday">-->
<!--                <el-date-picker-->
<!--                v-model="addUserForm.birthday"-->
<!--                type="date"-->
<!--                placeholder="选择出生日期"-->
<!--                value-format="yyyy-MM-dd hh:mm:ss"-->
<!--                class="datePicker"></el-date-picker>-->
<!--            </el-form-item>-->
            <el-form-item label="用户角色">
                <el-select v-model="addUserForm.roleId" placeholder="请选择角色" size="mini">
                    <el-option
                    v-for="(v,index) in roleList"
                    :key="index"
                    :label="v.roleName"
                    :value="v.roleId"></el-option>
                </el-select>
                </el-form-item>
            <div class="btn_opt">
                <el-form-item>
                <el-button type="primary" @click="submitForm('addUserForm')">立即创建</el-button>
                <el-button @click="resetForm('addUserForm')">重置</el-button>
                </el-form-item>
            </div>

        </el-form>
        </el-card>
    </div>
</template>
<script>
export default {
    name:"AddUser",
    data(){
        return{
            addUserForm:{},
            roleList:[],
            rules:{
                 workName: [
                            { required: true, message: '请输入用户账号', trigger: 'blur' },
                            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                        ],
                 password: [
                            { required: true, message: '请输入密码', trigger: 'change' }
                        ],
                 workSex: [
                            { required: true, message: '请选择性别', trigger: 'change' }
                        ],
                 workIdCard: [
                            { required: true, message: '请输入用户身份证号', trigger: 'blur' },
                            { min: 18, max: 18, message: '长度为 18 个字符', trigger: 'blur' }
                         ],
                 workTel: [
                            { required: true, message: '请输入电话号码', trigger: 'blur' },
                            { min: 6, max: 11, message: '长度在 6 到 11 个字符', trigger: 'blur' }
                        ],

            },
        }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid)=>{
          if(valid){
            this.$axios.post("/user-info/addNewUser",this.addUserForm).then(res=>{
              console.log(res)
              if (res.data.code ==200){
                this.$message.success("添加成功")
                console.log(res)

              } else {
                this.$message.error(res.data.msg)
              }
            }).catch(err=>{
              console.log(err)
            })

          }else{
            return false;
          }
        });
      },

      //重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      //查询所有角色信息
      getAllRole(){
        this.$axios.post("/role-info/getALLRole").then(res=>{
          console.log(res)
          this.roleList=res.data.data
        })
      },
    },
    created(){
        //查询所有角色信息
        this.getAllRole()
    }
}
</script>
<style scoped>
.el-breadcrumb{
    margin-bottom: 20px;
}
.el-form-item{
    width: 400px;
}
.el-select{
    width: 185px;
}
.datePicker >>> .el-input__inner{
    width: 185px;
}
.btn_opt{
    padding-left:35px ;
}
</style>
